<template>
	<view class="container">
			<img :src="list.icon" alt="" class="c1" />
		<uni-forms ref="form" :rules="yzrules" :model="list">
			<uni-forms-item label="账号" name="username">
				<uni-easyinput v-model="list.username" placeholder="请输入您的账号" prefixIcon="contact" :clearable="true" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="userpassword">
				<uni-easyinput v-model="list.userpassword" placeholder="请输入您的密码" prefixIcon="locked-filled"
					type='password' />
			</uni-forms-item>
			<uni-forms-item label="" name="">
				<button type="primary" @click="login" @keyup.enter='login'>登入</button>
			</uni-forms-item>
		

		</uni-forms>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: {
					icon:'../../static/logo.png',
					username: '',
					userpassword: ''
				},yzrules: {
			username: {
				rules: [{
						required: true,
						errorMessage: '账号输入有误',
					},
					{
						minLength: 3,
						maxLength: 5,
						errorMessage: '您输入的账号不符合要求',
					}
				]
			},
			userpassword: {
				rules: [{
						required: true,
						errorMessage: '密码输入有误',
					},
					{
						
						maxLength:11,
						errorMessage: '你输入的密码不符合要求',
					}
				]

			}
		}
			}
		},
		

		// onReady() {

		// 	this.$refs.form.setRules(this.yzrules)
		// },
		methods: {
			login() {
				let result=this.$refs.form.validate()
				if(result==true){
					
					return
				}
				if (this.list.username === "陈俊明" && this.list.userpassword === "123456") {
					setTimeout(() => {
						uni.switchTab({
							url: '../home/index'
						})
					}, 500)
					uni.showToast({
						title: "欢迎你" + this.list.username,
						icon:"none",
						
					})
					return
					// alert("登录成功")
				}
				else {
					// alert("账号或密码错误")
					uni.showToast({
						title: "用户名或密码错误",
						icon:"none",
						duration:500
					});
					// console.log(this.list.username);
					// this.$refs.form.validate()
				}
				
			}
		}
	}
</script>

<style>
	page {
		background-color: pink;
	}

	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		background-color: pink;
	}
		
	.c1{
		display: block;
		margin: 0 auto;
		margin-bottom: 25px;
	}
</style>